<template>
    <div id="splendid">
        <Title title="研学成果"/>
        <div class="title">
            【精彩瞬间】
        </div>
        <div class="content">
            <span class="dot">·</span>
            <span class="content-title">精彩合集</span>
            <WonderfulList/>
        </div>
        <div class="content">
            <span class="dot">·</span>
            <span class="content-title">上传照片</span>
            <div id="upload">
                <el-upload
                        action="#"
                        list-type="picture-card"
                        :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                </el-upload>
            </div>
            <div class="create-dir">
                <span id="text">
                    创建文件夹:
                </span>
                <el-input>

                </el-input>
                <div class="btn">
                    <el-button>
                        确认上传
                    </el-button>
                </div>
            </div>
        </div>
        <image-list class="image-box-list"/>
    </div>
</template>

<script>
    import Title from "../../../../../../../components/title/Title";
    import WonderfulList from "./wonderfulList/WonderfulList";
    import ImageList from "./imageList/ImageList";
    import {Upload, Input, Button} from 'element-ui';

    export default {
        name: "Splendid",
        components: {
            Title,
            WonderfulList,
            ImageList,
            "el-upload": Upload,
            "el-input": Input,
            "el-button": Button
        },
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false
            };
        },
        methods: {
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            }
        }
    }
</script>

<style lang="less">
    #splendid {
        .title {
            font-size: 20px;
            color: #505050;
            margin-top: 40px;
        }
        .image-box-list {
            margin-left: 70px;
            margin-top: 30px;
        }
        .content {
            display: flex;

            .dot {
                font-size: 75px;
                display: inline-block;
            }

            .content-title {
                display: inline-block;
                margin-left: 10px;
                line-height: 90px;
                text-align: center;
            }

            #upload {
                margin-top: 80px;
            }

            .create-dir {
                margin-top: 120px;
                display: flex;
                margin-left: 30px;

                #text {
                    width: 200px;
                    text-align: center;
                    height: 40px;
                    line-height: 40px;
                }
            }

            .btn {
                margin-left: 50px;
            }
        }
    }
</style>
